<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>消费确认明细</title>
<meta name="decorator" content="default" />
<style type="text/css">
</style>

<script type="text/javascript">
	function dropShopping() {
		// 自定义按钮
		global
				.confirm(
						"确定要取消本次消费，取消后，购物车将被清空？",
						function() {
							window.location.href = "${ctx}/cash/member/dropShopping?memberID=${member.customer.id}";
						});//confirm

	}

	function caclulateDebtMoney() {
		var total = Number($("#totalMoney").val());
		var cashMoney = Number($("#cashMoney").val());
		var leftMoney = total - cashMoney;
		if (leftMoney < 0) {
			leftMoney = 0;
		}
		$("#debtMoney").val(leftMoney);
	}
	var payCheck = {
		close : function() {
			$("div#dialog-payCheck").popup('close');
			$("div#dialog-payCheck #error").hide();
			$("div#dialog-payCheck #paycode").val("");
			$("div#dialog-payCheck h3#content").html("");
			$("div#dialog-payCheck #error").text("");
		},
		checkCode : function(content, form) {
			//update content
			$("div#dialog-payCheck h3#content").html(content);
			//bind change event
			$("div#dialog-payCheck #paycode").unbind().bind("change",
					function() {
						$("div#dialog-payCheck #error").hide();
					});
			//bind check click check
			$("div#dialog-payCheck #check")
					.unbind()
					.bind(
							"click",
							function() {
								var inputCode = $(
										"div#dialog-payCheck #paycode").val();
								if (inputCode == null) {
									$("div#dialog-payCheck #error").text(
											"验证码错误，请核对输入是否正确");
									$("div#dialog-payCheck #error").show();
								} else {
									jQuery
											.ajax({
												type : "post",
												url : "checkVerifyCode",
												data : {
													verifyCode : inputCode,
												},
												success : function(data) {
													if (data) {
														var dataJson = JSON
																.parse(data
																		.toLocaleString());
														if (dataJson[0] == 'true') {
															payCheck.close();
															form.submit();
														} else {
															$(
																	"div#dialog-payCheck #error")
																	.text(
																			"验证码错误，请核对输入是否正确");
															$(
																	"div#dialog-payCheck #error")
																	.show();
														}
													} else {
														$(
																"div#dialog-payCheck #error")
																.text(
																		"验证码错误，请核对输入是否正确");
														$(
																"div#dialog-payCheck #error")
																.show();
													}
												}
											});
								}
							});

			//bind resend click check
			$("div#dialog-payCheck #resend").unbind().bind("click", function() {
				resend();
			});
			resend();
			//show dialog
			$("#dialog-payCheck").popup("open");
		}
	};

	function resend() {
		jQuery.ajax({
			type : "post",
			url : "resendVerifyCode",
			success : function(data) {
				if (data) {
					var dataJson = eval(data);
					if (dataJson[0]) {
						showTip("动态校验码下发成功");
					}
				} else {
					showTip("动态校验码下发失败");
				}
			}
		});
	}

	function validateInputForm() {
		$("#inputForm").validate(
				{
					submitHandler : function(form) {
						var total = Number($("#totalMoney").val());
						var cashMoney = Number($("#cashMoney").val());
						var debtMoney = Number($("#debtMoney").val());
						var leftMoney = total - cashMoney;
						if (debtMoney < 0 || leftMoney != debtMoney) {
							global.confirm("错误的支付金额", function() {
							});//confirm
							return;
						}
						var content = "";
						if (total == cashMoney && debtMoney == 0) {
							content = "本次消费需实付现金 " + cashMoney + " 元 , "
									+ "请确认是否付款？";
						} else {
							content = "本次消费需实付现金 " + cashMoney + " 元 , 欠款 "
									+ debtMoney + "元," + "请确认是否付款？";
						}

						payCheck.checkCode(content, form);
						// 自定义按钮
						//global.confirm(content, function() {
						//	form.submit();
						//});//confirm
					},
					focusInvalid : false,
					rules : {},
					errorContainer : "#messageBox",
					errorPlacement : function(error, element) {
						$("#messageBox").text("输入有误，请先更正。");
						if (element.is(":checkbox") || element.is(":radio")) {
							error.appendTo(element.parent().parent());
						} else {
							error.insertAfter(element);
						}
					},
					messages : {}
				});//validate
	}//validateInputForm

	$().ready(function() {
		validateInputForm();
		disableExitMenu();
	});
</script>

</head>
<body>
	<tags:message content="${message}" />
	<div id="shoppingFinish" class="container">
		<form action="${ctx}/cash/member/shoppingFinish" method="post"
			id="inputForm">
			<input type="hidden" id="memberID" name="customer"
				value="${member.customer.id}" />
			<div class="icon-buttons">
				<a data-role="button" data-icon="back" data-iconpos="notext"
					href="${ctx}/cash/member/shoppingDetails?memberID=${member.customer.id}&back=back"
					data-inline="true"> 返回</a> <a data-role="button" data-inline="true"
					data-icon="delete" data-iconpos="notext"
					onclick="return dropShopping()"> 取消消费</a>
				<button type="submit" data-inline="true" data-icon="check"
					data-iconpos="notext">结账开单</button>
			</div>
			<div data-role="fieldcontain">
				<label><strong>应付现金(元): </strong></label> <input id="totalMoney"
					type="text" name="totalMoney" readonly
					value="${member.payment.total}" />
			</div>

			<div data-role="fieldcontain">
				<label><strong>支付现金(元): </strong></label> <input id="cashMoney"
					type="text" name="cashMoney" value="${member.payment.total}"
					onkeyup="caclulateDebtMoney()" />

			</div>
			<div data-role="fieldcontain">
				<label><strong>欠款 (元):</strong></label> <input id="debtMoney"
					type="text" name="debtMoney" readonly value="0" />
			</div>
		</form>
		<h3 style="text-align:center">消费明细</h3>
		<table data-role="table" class="ui-responsive table-stroke">
			<thead>
				<tr>
					<th>消费项目</th>
					<th>单价</th>
					<th>数量</th>
					<th>折扣</th>
					<th>优惠价</th>
					<th>合计</th>
					<th>付款方式</th>
				</tr>
			</thead>
			<tbody>
				<!-- 还欠款 -->
				<c:if test="${member.refundDebt>0}">
					<tr>
						<td colspan="5">还欠款</td>
						<td>${member.refundDebt}</td>
						<td>现金：付现 ${member.refundDebt} 元</td>
						<c:if test="${item.index==0}">
							<td rowspan="${member.newCards.count}" style="background:yellow">
								<ul>
									<c:forEach items="${member.newCards.details.payments}"
										var="payType">
										<li>${payType}</li>
									</c:forEach>
								</ul>
							</td>
						</c:if>
					</tr>

				</c:if>
				<!-- 新开卡 -->
				<c:forEach items="${member.newCards.details.items}" var="item">
					<tr>
						<td>${item.project}</td>
						<td>${item.retailPrice}</td>
						<td>${item.amount}</td>
						<td>${item.discount}</td>
						<td>${item.realPrice}</td>
						<td>${item.total}</td>
						<c:if test="${item.index==0}">
							<td rowspan="${member.newCards.count}"><c:forEach
									items="${member.newCards.details.payments}" var="payType">
										${payType}
									</c:forEach></td>
						</c:if>
					</tr>
				</c:forEach>
				<!-- 卡充值 -->
				<c:forEach items="${member.rechargeEleMgr.paymentDetails}"
					var="items">
					<tr>
						<td>${items[0]}</td>
						<td>${items[1]}</td>
						<td>${items[2]}</td>
						<td>${items[3]}</td>
						<td>${items[4]}</td>
						<td>${items[5]}</td>
						<td>${items[6]}</td>
					</tr>
				</c:forEach>

				<!-- 买系统产品 -->
				<c:forEach items="${member.shoppingCart.systemProducts}" var="pcart">
					<tr>
						<c:forEach items="${pcart.details}" var="detail">
							<td>${detail}</td>
						</c:forEach>
					</tr>
				</c:forEach>
				<!-- 买自营产品 -->
				<c:forEach items="${member.shoppingCart.storeProducts}" var="pcart">
					<tr>
						<c:forEach items="${pcart.details}" var="detail">
							<td>${detail}</td>
						</c:forEach>
					</tr>
				</c:forEach>

				<!-- 方案产品 -->
				<c:forEach items="${member.shoppingCart.solutionProducts}"
					var="pcart">
					<tr>
						<c:forEach items="${pcart.details}" var="detail">
							<td>${detail}</td>
						</c:forEach>
					</tr>
				</c:forEach>

				<!-- 赠系统产品 -->
				<c:forEach items="${member.giftCart.systemProducts}" var="pcart">
					<tr>
						<c:forEach items="${pcart.details}" var="detail">
							<td>${detail}</td>
						</c:forEach>
					</tr>
				</c:forEach>
				<!-- 赠自营产品 -->
				<c:forEach items="${member.giftCart.storeProducts}" var="pcart">
					<tr>
						<c:forEach items="${pcart.details}" var="detail">
							<td>${detail}</td>
						</c:forEach>
					</tr>
				</c:forEach>
				<!-- 做系统护理 -->

				<c:forEach items="${member.shoppingCart.systemCares}" var="cart">
					<tr>
						<c:forEach items="${cart.details}" var="detail">
							<td>${detail}</td>
						</c:forEach>
					</tr>
				</c:forEach>

				<!-- 做店面护理 -->
				<c:forEach items="${member.shoppingCart.storeCares}" var="cart">
					<tr>
						<c:forEach items="${cart.details}" var="detail">
							<td>${detail}</td>
						</c:forEach>
					</tr>
				</c:forEach>
				<!-- 方案护理 -->
				<c:forEach items="${member.shoppingCart.solutionCares}" var="cart">
					<tr>
						<c:forEach items="${cart.details}" var="detail">
							<td>${detail}</td>
						</c:forEach>
					</tr>
				</c:forEach>
				<tr>
					<td style="height: 1px !important;" colspan="7"></td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
</html>
